<template>
    <pre style="padding-left: 0">   
      <code class="language-Markup  line-numbers">
        <strong>组件基础</strong>
        
        地址：https://cn.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats
      </code>
    </pre>
    <div v-for="(book,index) in booklist" :key="index">
        <blog-post :book="book" @fontSize="changeSize" :style="{fontSize: defaultSize +'px'}"
        v-model:defaultblogtitle="defaultblogtitle"
        ></blog-post>
    </div>
  </template>
  <script lang="ts" setup>
  import { ref, reactive, onMounted ,watch} from "vue";
  import BlogPost from "./BlogPost.vue";
  import { BookModel } from "./type";
  import Prism from "prismjs"; 

  onMounted(()=>{
    Prism.highlightAll();
  })

  
  const defaultSize = ref('10');
  const booklist = reactive<BookModel[]>([]);
  const defaultblogtitle=ref(10);
  booklist.push({
    title:"杨树"
  },{
    title:"桃树"
  },{
    title:"槐树"
  });



  function changeSize(e : any){
    alert(e);
    defaultSize.value = e;
  }

  watch(defaultblogtitle,(newvalue,oldvalue)=>{
      console.log(`原来的值是:${oldvalue} 新的值是:${newvalue}`)
  })
  </script>